import React, { Component } from "react"

/*
  父子关系新写法
  也就是 vue 里面的插槽 插入到指定位置
*/
export default class RenderProps extends Component {
  render() {
    return (
      <>
        <div>RenderProps</div>
        <A render={(name) => <B name={name} />} />
        {/* render props 可以携带数据 一般使用render函数属性 */}

        {/* <A>
          <B />
        </A> */}
        {/* children props 不可以携带数据 */}
      </>
    )
  }
}

class A extends Component {
  state = { name: "qwe123" }
  render() {
    const { name } = this.state
    return (
      <>
        <div>A组件</div>
        {this.props.render(name)}
      </>
    )
  }
}

class B extends Component {
  render() {
    console.log(this.props)
    return <div>B组件{this.props.name}</div>
  }
}
